<template>
  <div class="loginBox">
    <div class="login">
      <div class="field-box">
        <div class="user-box">
          <img src="@/assets/login/number.png" alt="" />
          <Field
            v-model="state.user"
            :placeholder="
              store?.state?.lang?.currentLang?.please_enter +
                store?.state?.lang?.currentLang?.phone || '请输入手机号'
            "
            clearable
            autocomplete="off"
          />
        </div>
        <div class="code-box">
          <img class="icon" src="@/assets/login/secure.png" alt="" />
          <Field
            v-model="state.code"
            :placeholder="
              store?.state?.lang?.currentLang?.please_enter +
                store?.state?.lang?.currentLang?.verification_code ||
              '请输入验证码'
            "
            clearable
          />
          <img
            class="verify-code"
            v-if="state.verifyInfo"
            :src="state.verifyInfo && state.verifyInfo.base64"
            alt=""
          />
        </div>
        <div class="code-tip">
          <span></span>
          <span @click="getVerify">点击刷新图片验证码</span>
        </div>
        <div class="phone-box">
          <img src="@/assets/login/information.png" alt="" />
          <Field
            v-model="state.user"
            :placeholder="
              store?.state?.lang?.currentLang?.please_enter +
                store?.state?.lang?.currentLang?.phone || '请输入手机号'
            "
            clearable
            autocomplete="off"
          />
          <span>获取短信验证码</span>
        </div>
      </div>
      <van-button
        @click="onSubmit"
        class="btn"
        style="margin-top: 60px; flex-shrink: 0; border-radius: 6px"
        type="primary"
        round
        >{{ store?.state?.lang?.currentLang?.menu_login || "登录" }}</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { login, verify } from "@/httpAction/login";
import { useLanguage, jsonToUrlParams } from "../utils/help";
import Field from "@/components/Field.vue";
const store = useStore();
const router = useRouter();
const state = reactive({
  user: "", // 用户名
  password: "", // 密码
  code: "", // 验证码
  verifyInfo: null,
  passwordType: "password",
  loginType: "",
});
onMounted(() => {
  getVerify();
});

const getVerify = async () => {
  try {
    const res = await verify();
    if (res.code != 1) {
      return false;
    }
    state.verifyInfo = res.info;

    if (localStorage.getItem("isTest")) {
      state.user = "2022010"; // 用户名
      state.password = "000"; // 密码
      // state.code = '' // 验证码
    }
  } catch (e) {
    console.log(e);
  }
};
const UserLogin = async () => {
  try {
    let openId = localStorage.getItem("openId") || "";
    let params = {
      username: state.user,
      password: state.password,
      code: state.code,
      key: state.verifyInfo?.key,
    };
    if (openId) params.open_id = openId;
    const res = await login(params);
    if (res.code != 1) {
      state.code = "";
      Toast({
        message: res.msg,
        duration: 3000,
      });
      getVerify();
      return false;
    }

    sessionStorage.setItem("token", res.data.token);
    sessionStorage.setItem("UserInfo", JSON.stringify(res.data));
    if (routePath) {
    } else {
    }

    console.log(res);
  } catch (e) {
    console.log(e);
    getVerify();
  }
};
const onSubmit = async () => {
  console.log("submit", state);
  if (!state.user || !state.password) {
    Toast("请填写完整用户信息~");
    return false;
  }
  if (!state.code) {
    Toast("请填写验证码~");
    return false;
  }
  UserLogin();
};

</script>

<style lang="scss" scoped>
.loginBox {
  width: 100%;
  height: 100vh;
  background-color: var(--bgColor) !important;
  h4 {
    font-size: 18px;
  }
  .login {
    margin: 0 auto;
    box-sizing: border-box;
    padding-bottom: 120px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: auto;
    .top-logo {
      width: 100%;
      height: 273px;
      background: url("@/assets/login/background.png") no-repeat;
      background-size: 100% 100%;
      position: relative;
      h4 {
        display: flex;
        justify-content: center;
        margin: 24px 0 12px 0;
      }
      .toggle-wrap {
        display: flex;
        justify-content: space-between;
        margin: 0 22px;
        .toggle {
          font-size: 13px;
          span {
            padding: 6px 12px;
            color: #999999;
            background: #f0f0f0;
            transition: 0.2s;
            &.active {
              background: var(--van-primary-color);
              color: #fff;
            }
          }
          .zh {
            border-radius: 4px 0px 0px 4px;
          }
          .en {
            border-radius: 0px 4px 4px 0px;
          }
        }
      }
      .logo {
        position: absolute;
        left: 50%;
        bottom: -23px;
        margin-left: -36px;
        width: 72px;
        height: 72px;
        background: #35539e;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
        img {
          width: 54px;
          height: 54px;
        }
      }
    }
    .field-box {
      margin-top: 78px;
      .user-box {
        margin: 0 28px 10px 43px;
        border-radius: 4px;
        border: 1px solid #e6e6e6;
        display: flex;
        align-items: center;
        padding-right: 9px;
        img {
          width: 16px;
          height: 16px;
          margin: 0 9px 0 12px;
        }
      }
      .code-box {
        margin: 0 28px 10px 43px;
        border-radius: 4px;
        border: 1px solid #e6e6e6;
        display: flex;
        align-items: center;
        .icon {
          width: 16px;
          height: 16px;
          margin: 0 9px 0 12px;
        }
        .verify-code {
          height: 42px;
          width: 145px;
          margin-left: 9px;
        }
      }
      .code-tip {
        display: flex;
        justify-content: space-between;
        margin: 0 28px 11px 43px;
        span {
          font-weight: 400;
          color: #35539e;
          font-size: 12px;
        }
      }
      .phone-box {
        margin: 0 28px 10px 43px;
        border-radius: 4px;
        border: 1px solid #e6e6e6;
        display: flex;
        align-items: center;
        img {
          width: 16px;
          height: 16px;
          margin: 0 9px 0 12px;
        }
        span {
          font-weight: 400;
          color: #35539e;
          font-size: 14px;
          white-space: nowrap;
          margin: 0 13px 0 9px;
        }
      }
    }
    .btn {
      margin: 0 34px 0 49px;
    }
  }
}
</style>
